<template>
	<div class="active">
	<div class="modal-backdrop" @click="closeModal">
		<div class="modal" @click.stop>
			<div class="modal-header header">
				<slot name="header" class="header">
					<div class="cancle" @click="close">取消</div>
					<div class="submit" @click="submit">确定</div>
					<!--<h3 class="title">请选择</h3>
					<div class="close" @click="close">x</div>-->
				</slot>
			</div>
			<div class="modal-body">
				<slot name="body">
					<div class="box" v-for="item in list" :key="item.id" v-if="item.fetchSelect == 1">
						<div class="left">
						   <label class="demo--label">
			                 <input class="demo--radio" type="radio" :value="item.id" v-model="myVal"/> 
			                 <span class="demo--radioInput"></span>
			              </label>
						</div>
						<div class="right">
							<h3>{{item.favourType}}</h3>
							<p>{{item.favourDesc}}</p>
						</div>
					</div>
				</slot>
			</div>
			<!--<div class="modal-footer">
				<slot name="footer">
					<div class="submit" @click="submit">保存</div>
				</slot>
			</div>-->
		</div>
	</div>
</div>
</template>

<script>
export default {
	name: 'active',
	data() {
		return {
			name:'',
			address:'',
			list:[],
			myVal:''
		}
	},
	created () {
		this.list = this.$store.state.active_data
	},
	mounted() {

	},
	methods: {
		//取消选中
		/*checkedClear($event){
			let _this = this
			window.setTimeout(() =>{
				if(!_this.changed) {
					$event.target.checked = false
				}
			},0)
			this.isChange()
		},*/
		isChange () {
			this.changed = false
		},
		closeModal () {
			this.$emit('closeModal',false);
			this.$emit("params",this.myVal)
		},
		//取消
		close () {
			this.$emit('closeModal',false);
			this.myVal = ''
			this.$emit("params",this.myVal)
		},
		//确定
		submit() {
			this.$emit('closeModal',false);
			this.$emit("params",this.myVal)
		}
	}
}
</script>

<style scoped>
	 .modal-backdrop {
	 	position: absolute;
	 	top: 0;
	 	right: 0;
	 	bottom: 0;
	 	left: 0;
	 	z-index: 88;
	 	background-color: rgba(0, 0, 0, .6);
	 	display: flex;
        justify-content: center;
        align-items: center; 
	 }
	 
	 .modal {
	 	background-color: #fff;
        box-shadow: 2px 2px 20px 1px;
        border-top-right-radius: 10px;
        border-top-left-radius: 10px;
        overflow-x:auto;
        display: flex;
        flex-direction: column;
	 	position: fixed;
	 	top: 400px;
	 	bottom: 0;
	 	left: 0;
	 	right: 0;
	 	width: 100%;
	 }
	 .modal-header {
	 	display: flex;
	 	width: 100%;
	 	height: 100px;
	 	border-bottom: 1px solid gainsboro;
	 	background: #FFFFFF;
	 	position: fixed;
	 	left: 0;
	 	z-index: 88;
	 }
	 .cancle{
	 	flex: 1;
	 	text-align: center;
	 	font-size: 34px;
	 	line-height: 100px;
	 	color: #FFFFFF;
	 	background: darkgray;
	 }
	 .submit{
	 	flex: 1;
	 	text-align: center;
	 	color: #FFFFFF;
	 	font-size: 34px;
	 	line-height: 100px;
	 	background: goldenrod;
	 }
     .header{
     	border-bottom: 1px solid gainsboro;
     }    
	 .title {
	 	flex: 1;
	 	text-align: center;
	 	line-height: 100px;
	 }
	 
	 .close {
	 	position: absolute;
	 	width: 40px;
	 	text-align: center;
	 	height: 40px;
	 	right:35px;
	 	font-size: 44px;
	 	color: dimgrey;
	 	line-height: 100px;
	 }
	  .modal-body{
     	margin: 40px 0;
     	margin-top: 120px;
     	font-size: 28px;
     }
     .box{
     	padding:10px 20px;
        display: -webkit-flex;
        align-items: center;
        justify-content: center;
     }
     .left{
     	width:60px;
     }
     .right{
     	flex: 1;
     	font-size: 28px;
     }
	 .demo--label {
		margin: 20px 20px 0 0;
		display: inline-block
	}
	.demo--radio {
		display: none
	}
	.demo--radioInput {
		background-color: #fff;
		border: 2px solid rgba(0, 0, 0, 0.15);
		border-radius: 100%;
		display: inline-block;
		height: 36px;
		margin-right: 10px;
		margin-top: -1px;
		vertical-align: middle;
		width: 36px;
		line-height: 1
	}
	.demo--radio:checked+.demo--radioInput:after {
		background-color: #00A1E9;
		border-radius: 100%;
		content: "";
		display: inline-block;
		height: 26px;
		margin-left: 5px;
		margin-top: 5px;
		width: 26px
	}
	.demo--checkbox.demo--radioInput,.demo--radio:checked + .demo--checkbox.demo--radioInput:after{
		border-radius:0;
		}
		.active{
			background: #00A1E9;
		}
</style>